<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const goTo = (path) => {
  router.push(path);
};

</script>


<template>
  <div class="wrapper">
  <!--    header 部分-->
  <header>
    <p>商家列表</p>
  </header>
  <!--  商家列表部分  -->
  <ul class="business">
    <li onclick="location.href='businessInfo.html'">
      <div class="business-img">
        <img src="@/img/img/sj01.png" />
        <div class="business-img-quantity">3</div>
      </div>
      <div class="business-info">
        <h3>万家饺子（软件园E18店）</h3>
        <p>&#165;15起送 | &#165;3配送</p>
        <p>各种饺子炒菜</p>
      </div>
    </li>
    <li onclick="location.href='businessInfo.html'">
      <div class="business-img">
        <img src="@/img/img/sj02.png" />
        <div class="business-img-quantity">2</div>
      </div>
      <div class="business-info">
        <h3>小锅饭豆腐馆（全运店）</h3>
        <p>&#165;15起送 | &#165;3配送</p>
        <p>特色美食</p>
      </div>
    </li>
    <li onclick="location.href='businessInfo.html'">
      <div class="business-img">
        <img src="@/img/img/sj03.png" />
        <div class="business-img-quantity">1</div>
      </div>
      <div class="business-info">
        <h3>麦当劳麦乐送（全运路店）</h3>
        <p>&#165;15起送 | &#165;3配送</p>
        <p>汉堡薯条</p>
      </div>
    </li>
    <li onclick="location.href='businessInfo.html'">
      <div class="business-img">
        <img src="@/img/img/sj04.png" />

      </div>
      <div class="business-info">
        <h3></h3>
        <p>&#165;15起送 | &#165;3配送</p>
        <p>各种炒菜拌饭</p>
      </div>
    </li>
    <li onclick="location.href='businessInfo.html'">
      <div class="business-img">
        <img src="@/img/img/sj05.png" />
      </div>
      <div class="business-info">
        <h3>申记串道（中海康城店）</h3>
        <p>&#165;15起送 | &#165;3配送</p>
        <p>烤串炸串</p>
      </div>
    </li>
    <li onclick="location.href='businessInfo.html'">
      <div class="business-img">
        <img src="@/img/img/sj06.png" />
      </div>
      <div class="business-info">
        <h3>半亩良田排骨米饭</h3>
        <p>&#165;15起送 | &#165;3配送</p>
        <p>排骨米饭套餐</p>
      </div>
    </li>
    <li onclick="location.href='businessInfo.html'">
      <div class="business-img">
        <img src="@/img/img/sj07.png" />
      </div>
      <div class="business-info">
        <h3>茶今鲜果饮品（国际软件园店）</h3>
        <p>&#165;15起送 | &#165;3配送</p>
        <p>甜品饮品</p>
      </div>
    </li>
    <li onclick="location.href='businessInfo.html'">
      <div class="business-img">
        <img src="@/img/img/sj08.png" />
      </div>
      <div class="business-info">
        <h3>唯一水果捞（软件园E18店）</h3>
        <p>&#165;15起送 | &#165;3配送</p>
        <p>新鲜水果</p>
      </div>
    </li>
    <li onclick="location.href='businessInfo.html'">
      <div class="business-img">
        <img src="@/img/img/sj09.png" />
      </div>
      <div class="business-info">
        <h3>满园春饼（全运路店）</h3>
        <p>&#165;15起送 | &#165;3配送</p>
        <p>各种春饼</p>
      </div>
    </li>
  </ul>

  </div>
  <div class="fixed-buttons">
    <el-row justify="space-around">
      <el-col :span="6">
        <el-button type="text" @click="goTo('/index')">

          <span>首页</span>
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="text" @click="goTo('/order')">

          <span>订单</span>
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="text" @click="goTo('/discover')">

          <span>发现</span>
        </el-button>
      </el-col>
      <el-col :span="6">
        <el-button type="text" @click="goTo('/my')">

          <span>我的</span>
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.wrapper{
  width: 100%;
  height: 100%;
}
/******************header部分******************/
/* header部分 */
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0997FF;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}
/***********商家列表部分************/
.wrapper .business{
  width: 100%;
  margin-top: 12vw;
  padding-bottom: 14vw;
}

.wrapper .business li{
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  border: 1px solid #DDD;
  user-select: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  /*justify-content: ;*/
}

.wrapper .business li .business-img{
  position: relative;
}
.wrapper .business li .business-img img{
  width: 20vw;
  height:20vw ;

}

.wrapper .business li .business-img .business-img-quantity{
  width: 5vw;
  height:5vw ;
  background-color: red;
  color: #fff;
  font-size: 3.6vw;
  border-radius: 2.5vw;

  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: -1.5vw;
  top:-1.5vw
  /*    超出图片位置使用负数值*/
}
.wrapper .business li .business-info{
  margin-left: 3vw;
}
.wrapper .business li .business-info h3{
  font-size: 3.8vw;
  color: #555;
}
.wrapper .business li .business-info p{
  font-size: 3vw;
  color:#888 ;
  margin-top: 2vw;
}

/*  底部菜单部分*/
.wrapper .footer{
  display: flex;
  width:100% ;
  height:14vw ;
  border-top: solid 1px  #DDD;
  position: fixed;
  left:0 ;
  bottom: 0;
  background-color: #fff;
  justify-content:space-around ;
  align-items: center;


}
.wrapper .footer li{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  user-select: none;
  cursor: pointer;

}

.wrapper .footer li p{
  font-size: 2.8vw;

}
.wrapper .footer li i{
  font-size: 5vw;
}

.fixed-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 10px 0;
  border-top: 1px solid #ccc;
}
</style>